import React from 'react'
import './index.css'
import avatar from './images/avatar.png'
import dayjs from 'dayjs'

// gif => 动图 => 很小的图标 => 也会使用 gif => 体积很小 => 支持的颜色不丰富

// png => 透明 => 很高清 => 文件提交相对大一些

// jpg => 不支持透明 => 色彩非常丰富

export default class App extends React.Component {
  state = {
    // hot: 热度排序  time: 时间排序
    tabs: [
      {
        id: 1,
        name: '热度',
        type: 'hot',
      },
      {
        id: 2,
        name: '时间',
        type: 'time',
      },
    ],
    active: 'time',
    list: [
      {
        id: 1,
        author: '刘德华',
        comment: '给我一杯忘情水',
        time: '2021-10-10 09:09:00',
        img: 'https://y.qq.com/music/photo_new/T001R300x300M000003aQYLo2x8izP.jpg?max_age=2592000',
        // 1: 点赞 0：无态度 -1:踩
        attitude: 1,
      },
      {
        id: 2,
        author: '周杰伦',
        comment: '听妈妈的话',
        time: '2021-10-11 09:09:00',
        img: 'https://y.qq.com/music/photo_new/T001R500x500M0000025NhlN2yWrP4.jpg?max_age=2592000',
        // 1: 点赞 0：无态度 -1:踩
        attitude: 0,
      },
      {
        id: 3,
        author: '陈奕迅',
        comment: '十年',
        time: '2021-10-11 10:09:00',
        img: 'https://y.qq.com/music/photo_new/T001R500x500M000003Nz2So3XXYek.jpg?max_age=2592000',
        // 1: 点赞 0：无态度 -1:踩
        attitude: -1,
      },
    ],
    comment: '',
  }
  handleClick(active) {
    this.setState({ active })
  }
  handleDel(id) {
    this.setState({
      list: this.state.list.filter((item) => item.id !== id),
    })
  }
  handleChange = (e) => {
    this.setState({
      comment: e.target.value,
    })
  }
  handleSubmit = () => {
    const c = {
      id: Date.now(),
      author: 'elser',
      comment: this.state.comment,
      time: new Date(),
      img: 'https://y.qq.com/music/photo_new/T001R300x300M000003aQYLo2x8izP.jpg?max_age=2592000',
      attitude: 0,
    }
    this.setState({
      list: [c, ...this.state.list],
      comment: '',
    })
  }
  render() {
    const { state } = this
    return (
      <div className='App'>
        <div className='comment-container'>
          <div className='comment-head'>
            <span>{state.list.length} 评论</span>
          </div>
          <div className='tabs-order'>
            <ul className='sort-container'>
              {state.tabs.map((item) => (
                <li onClick={() => this.handleClick(item.type)} className={item.type === state.active ? 'on' : ''} key={item.id}>
                  按{item.name}排序
                </li>
              ))}
            </ul>
          </div>
          <div className='comment-send'>
            <div className='user-face'>
              <img className='user-head' src={avatar} alt='' />
            </div>
            <div className='textarea-container'>
              <textarea cols='80' rows='5' placeholder='发条友善的评论' className='ipt-txt' value={this.state.comment} onChange={this.handleChange}></textarea>
              <button className='comment-submit' onClick={this.handleSubmit}>
                发表评论
              </button>
            </div>
            <div className='comment-emoji'>
              <i className='face'></i>
              <span className='text'>表情</span>
            </div>
          </div>
          <div className='comment-list'>
            {state.list.length === 0 ? (
              <h3 style={{ textAlign: 'center' }}>暂无内容~</h3>
            ) : (
              state.list.map((item) => (
                <div className='list-item' key={item.id}>
                  <div className='user-face'>
                    <img className='user-head' src={item.img} alt='' />
                  </div>
                  <div className='comment'>
                    <div className='user'>{item.author}</div>
                    <p className='text'>{item.comment}</p>
                    <div className='info'>
                      <span className='time'>{dayjs(item.time).format('YYYY-MM-DD HH:mm:ss')}</span>
                      <span className={item.attitude === 1 ? 'like liked' : 'like'}>
                        <i className='icon'></i>
                      </span>
                      <span className={item.attitude === -1 ? 'hate hated' : 'hate'}>
                        <i className='icon'></i>
                      </span>
                      <span className='reply btn-hover' onClick={() => this.handleDel(item.id)}>
                        删除
                      </span>
                    </div>
                  </div>
                </div>
              ))
            )}
          </div>
        </div>
      </div>
    )
  }
}
